<template>
  <div class="mine" style="background: #f4f4f4">
    <div class="main-box">
      <div class="nick-name">
        <div class="nick-img">
          <uploadImg></uploadImg>
        </div>
        <div class="nick-user gotologin">
          <p v-if="userInfo.phone">
            {{ userInfo.phone }} / {{ userInfo.username }}
          </p>
          <router-link class="" :to="{ name: 'login' }" v-else
            >立即登录</router-link
          >
        </div>
      </div>
      <div class="btm">
        <div class="msg">
            <van-cell icon="envelop-o" title="我的消息" is-link />
            <van-cell icon="smile-o" title="查看今日运势" is-link />
            <van-cell @click="gotowhere('peeling')" icon="brush-o" title="个性装扮" is-link />
        </div>
        <div class="msg">
            <p>音乐服务</p>
            <van-cell icon="vip-card-o" title="云村有票" is-link />
            <van-cell icon="cart-o" title="商城" is-link />
            <van-cell icon="shop-collect-o" title="游戏专区" is-link />
            <van-cell icon="award-o" title="口袋彩铃" is-link />
        </div>
        <div class="msg">
            <p>其他</p>
            <van-cell icon="setting-o" title="设置" is-link />
            <van-cell icon="service-o" title="边听边存" is-link />
            <van-cell icon="clock-o" title="定时关闭" is-link />
            <van-cell icon="aim" title="音乐闹钟" is-link />
            <van-cell icon="description" title="我的订单" is-link />
            <van-cell icon="balance-pay" title="优惠券" is-link />
            <van-cell icon="question-o" title="帮助与反馈" is-link />
            <van-cell icon="share-o" title="分享网易云音乐" is-link />
            <van-cell icon="info-o" title="关于" is-link />
        </div>
        <van-button class="btn" v-if="userInfo.phone" @click="logout">注销登录</van-button>
      </div>
    </div>
  </div>
</template>


<script>
import { mapState, mapMutations } from "vuex";
import { Notify } from "vant";

export default {
  data() {
    return {
      phone: localStorage.getItem("phone"),
    };
  },
  methods: {
    ...mapMutations(["setUserInfo"]),
    logout(){
        localStorage.removeItem('token');
        localStorage.removeItem('phone');
        this.userInfo.phone = '';
        this.userInfo.avatar = require('@/assets/images/photo.png');
    },
    gotowhere(v){
      if(this.userInfo.phone){
        this.$router.push({name:v})
      }else{
        Notify({ type: "danger", message: '请先登录后再进入' });
      }
    }
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  mounted() {
    this.$ajax.getuserinfo().then((res) => {
      if (res.code == 200) {
        this.setUserInfo(res.result);
      }
    });
  },
};
</script>


<style lang="scss" scoped>
@import "@/assets/styles/allColor.scss";

.gotologin {
  font-size: 20px;
  color: #fff;
}

.main-box {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.btm{
    height: 100vh;
    overflow: auto;
    padding-bottom: 20px;
}
.main-box{
    position: relative;
}

.nick-name {
  @include background-color_primary($color-primary3);
  padding: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  a{
      color:#fff
  }
  .nick-img {
    width: 63px;
    height: 63px;
    border-radius: 35px;
    margin-right: 20px;
    border: 2px solid #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
.btn {
  margin-top: 10px;
  width: 94%;
  border-radius: 10px;
  @include color_primary($color-primary3);
}
.msg {
  width: 94%;
  margin: auto;
  margin-top: 10px;
  text-align-last: left;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  p {
    border-bottom: 1px solid #ddd;
    color: #ccc;
    padding: 10px;
    padding-left: 20px;
  }
}
</style> 
